<!-- home -->
<template>
  <div class="login-container" v-on:touchend="touchend" >
    <img src="../../assets/image/login/l_circle.png" alt="" class="login-circle">
    <img class="login-bac" src="../../assets/image/login/l_close.png" @click="goBack" alt="" />
    <p class="login-welcome">Welcome</p>
    <p class="login-hi">嗨！矿友们好</p>
    <div class="login-form">
      <div class="input-item">
        <input type="text" class="input" v-model="phone" :readonly="loading" placeholder="请输入手机号">
      </div>
      <div class="input-item">
        <input :type='pwdFlag?"password":"text"' v-model="password" class="input" :readonly="loading" placeholder="请输入密码">
        <span class="login-eye">
          <!-- <img :src='pwdFlag?textIcon:pwdIcon' alt=""  @click="changePw"> -->
          <img src="../../assets/image/login/l_ceye.png" alt="" v-if = "pwdFlag" @click="changePw">
          <img src="../../assets/image/login/l_oeye.png" alt="" v-if = "pwfl" @click="changePw">
        </span>
      </div>
      <div class="login-log" 
      :class="{'start': start,'end': end, 'loading': loading}" >
        <div ref="btn"
        :style="btnStyle"
        v-on:touchstart="touchstart" 
        v-on:touchmove="touchmove" class="btn"></div>
        <div class="text">
          {{loginText}}
        </div>
      </div>
    </div>
    <div class="login-bottom">
      <p class="other"><span @click="goForger">忘记密码</span> | <span @click="goRegiter">用户注册</span></p>
      <p>继续登录即代表同意<span class="login-agree" @click="goAgree">《矿金所用户协议》</span></p>
    </div>
  </div>
</template>

<script>

import service from '@/utils/request';
import { Dialog, Toast } from 'vant';
export default {
  data() {
    return {
      //眼睛标识
      pwdFlag:true,
      pwfl:false,
      // textIcon:'../../assets/image/login/l_ceye.png',
      // pwdIcon:'../../assets/image/login/l_oeye.png',
      list: [],

      loginText: '滑动登录',
      loading: false,
      start: false,
      end: false,
      startX: 0,
      max: 0,
      x: 0,

      phone: "", //
      password: "", //

      btnStyle:{
        left: 0
      }
    }
  },

  computed: {},

  mounted() {
    let btnw = this.$refs.btn.offsetWidth;
    let boxw = this.$refs.btn.parentNode.clientWidth;
    this.max = boxw - btnw - (btnw/11)*2;
    this.loginText = '滑动登录'
  },

  methods: {
    reset(){
      this.loginText = '滑动登录';
      this.btnStyle.left = 0;
    },
    //m密码
     changePw() {
      if(this.loading){
        return;
      }
      this.pwdFlag = !this.pwdFlag
      this.pwfl = !this.pwfl
    },
    //页面跳转
    goAgree(){
      this.$router.push({ path: '/product/agreement/REGISTER_AGREEMENT' })
    },
    goRegiter(){
      this.$router.push({path:'/register'})
    },
    goForger(){
       this.$router.push({path:'/find'})
    },
    goHome(){
       this.$router.push({path:'/home'})
    },
    goBack(){
      this.$router.back({
        login: false,
      });
    },
    login(){
      let seft = this;
      if(!this.phone){
        this.btnStyle.left = 0;
        Dialog({ 
          title: '提示',
          message: '手机号不能为空！' 
        })
        return;
      }
      if(!this.password){
        Dialog({ 
          title: '提示',
          message: '密码不能为空！' 
        })
        this.btnStyle.left = 0;
        return;
      }
      // 登录
      this.loading = true;
      this.loginText = '登录中...';
      return service.post('/apiLogin.do', {
        phone: this.phone,
        password: this.password
      }, {
        hideloading: true
      }).then(res => {
        return res.data;
      }).then(user => {
        this.$store.dispatch('setUser', user)
        setTimeout(()=>{
          if(seft.$route.params.type == 1){
            seft.$router.back({
              login: true
            });
          }else{
            seft.$router.replace({path:'/home'})
          }
          this.loading = false;
        }, 1000);
      }, ()=>{
        this.loading = false;
      })
    },
    touchstart(e){
      if(this.end || this.loading){
        return;
      }
      this.start = true;
      this.end = false;
      this.startX = e.touches[0].pageX;
      console.log(this.startX);
    },
    touchmove(e){
      if(this.end || this.loading){
        return;
      }
      this.x = e.touches[0].pageX - this.startX;
      if(this.x <= 0){
        this.x = 0;
      }
      if(this.x >= this.max){
        this.x = this.max;
      }
      this.btnStyle.left = `${this.x}px`;
      console.log(this.x);
    },
    touchend(e){
      if(this.start){
        if(this.x + 20 >= this.max){
          // this.end = true;
          this.btnStyle.left = `${this.max}px`;
          this.login();
        }else{
          this.x = 0;
          this.btnStyle.left = `${this.x}px`;
        }
        this.start = false;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login-container {
  display: flex;
  flex-flow: column;
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url('../../assets/image/login/l_bac.png') center / contain no-repeat;
  background-size: cover;
  background-position: center;
  overflow: auto;
  .login-circle{
    position: absolute;
    right: 0;
    top: 0;
    width: 179px;
    height: 185px;
    z-index: 1;
  }
  .login-bac {
    position: relative;
    width: 26px;
    height: 27px;
    margin: 47px 0 23px 22px;
    z-index: 1;
  }
  .login-welcome{
    position: relative;
    height: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #B2E5F5;
    line-height: 16px;
    padding-left: 23px;
    z-index: 2;
  }
  .login-hi{
    position: relative;
    height: 42px;
    line-height: 42px;
    padding-left: 23px;
    font-size: 30px;
    color: #fff;
    font-weight: 500;
    z-index: 2;
  }
  .login-form{
    flex: 1;
    position: relative;
    height: auto;
    margin: 35px 0;
    padding: 0 20px;
    .input-item{
      position: relative;
      margin-top: 17px;
      input{
        box-sizing: border-box;
        width: 100%;
        height: 47px;
        background: #FFFFFF;
        border-radius: 23px;
        border: 0;
        line-height: 47px;
        padding-left: 28px;
        padding-right: 60px;
        font-size: 16px;
        color: #AAACC8;
      }
      .login-eye{
        position: absolute;
        right: 19px;
        top: 15px;
        width: 25px;
        height: 18px;
        img{
          width: 25px;
          height: 18px;
        }
      }
    }
  }
  
  .login-log{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 47px 60px 0;
    height: 65px;
    background: #FFFFFF;
    border-radius: 32px;
    border: 1px solid #4044D0;
    .btn{
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      margin: 5px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: linear-gradient(141deg, #585DF9 0%, #5885F9 100%);
      transition: all 0.15s;
      &::before,
      &::after{
        display: block;
        content: "";
        width: 18px;
        height: 4px;
        border-radius: 5px;
        background: #fff;
        margin: 4px;
        transition: all 0.35s;
      }
      &::before{
        transform: rotate(50deg) translate(0.5px, 0px);
      }
      &::after{
        transform: rotate(-50deg) translate(0.5px, 0px);
      }
      &.end{
        &::before{
          transform: rotate(224deg) translate3d(-3px, -10px, 10px);
          width: 13px;
        }
        &::after{
          transform: rotate(134deg) translate3d(-8px, 0px, 10px);
          width: 22px;
        }
      }
      &.loading{
        &::before{
          margin: 0;
          width: 20px;
          height: 20px;
          border-radius: 5px;
          border-top: none;
          border-right: none;
          animation: loading 2s linear infinite;
        }
        &::after{
          position: absolute;
          margin: 0;
          width: 18px;
          height: 18px;
          background-color: #5975fa;
        }
      }
    }
    &.start{
      .btn{
        transition: none;
      }
    }
    &.end{
      .btn::before{
        transform: rotate(224deg) translate3d(-4px, -11px, 10px);
        width: 13px;
      }
      .btn::after{
        transform: rotate(134deg) translate3d(-8px, 0px, 10px);
        width: 22px;
      }
    }
    &.loading{
      .btn::before{
        margin: 0;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        border-top: none;
        border-right: none;
        animation: loading 2s linear infinite;
      }
      .btn::after{
        position: absolute;
        margin: 0;
        width: 18px;
        height: 18px;
        background-color: #5975fa;
        animation: loading2 1.5s linear infinite;
      }
    }
    &.end,
    &.loading{
      .text{
        padding-left: 0;
        padding-right: 20px;
      }
    }
    .text{
      padding-left: 20px;
      color: #AAACC8;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      transition: all .15s;
    }
  }

  .login-bottom{
    margin-bottom: 25px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
    .login-agree{
      color: #FBD755;
    }
    .other{
      margin-bottom: 17px;
    }
  }
}

@keyframes loading {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes loading2 {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}
</style>
